<nav ui-nav>
  <ul class="nav">
    <li class="nav-header h4 m-v-sm">
      UI Kits
    </li>
    <li ng-class="{active:$state.includes('ui.component')}">
      <a>
        <span class="pull-right text-muted">
          <i class="fa fa-caret-down"></i>
        </span>
        <i class="icon glyphicon glyphicon-briefcase text-lt"></i>
        <span class="font-normal">Components</span>
      </a>
      <ul class="nav nav-sub bg">
        <li ui-sref-active="active">
          <a ui-sref="ui.component.arrow">Arrow</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.badge-label">Badge &amp; Label</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.button">Button</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.color">Color</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.grid">Grid</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.icon">Icon</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.list">List Group</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.nav">Nav</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.panel">Panel</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.progressbar">Progressbar</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.streamline">Streamline</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.component.timeline">Timeline</a>
        </li>
      </ul>
    </li>
    <li ng-class="{active:$state.includes('ui.angular-strap')}">
      <a>
        <span class="pull-right text-muted">
          <i class="fa fa-caret-down"></i>
        </span>
        <b class="badge bg-success pull-right">14</b>
        <i class="icon glyphicon glyphicon-font text-lt"></i>
        <span class="font-normal">Angular Strap</span>
      </a>
      <ul class="nav nav-sub bg">
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.affix">Affix</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.alert">Alert</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.aside">Aside</a>
        </li>        
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.button">Button</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.collapse">Collapse</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.dropdown">Dropdown</a>
        </li>        
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.datepicker">Datepicker</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.timepicker">Timepicker</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.modal">Modal</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.select">Select</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.tab">Tab</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.tooltip">Tooltip</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.popover">Popover</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.angular-strap.typeahead">Typeahead</a>
        </li>
      </ul>
    </li>
    <li ng-class="{active:$state.includes('ui.form')}">
      <a>
        <span class="pull-right text-muted">
          <i class="fa fa-caret-down"></i>
        </span>
        <i class="icon glyphicon glyphicon-edit text-lt"></i>
        <span class="font-normal">Form</span>
      </a>
      <ul class="nav nav-sub bg">
        <li ui-sref-active="active">
          <a ui-sref="ui.form.layout">Form Layout</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.element">Form Element</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.validation">Form Validation</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.select">Select</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.editor">Editor</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.slider">Slider</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.tree">Tree</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.file-upload">File Upload</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.form.image-crop">Image Crop</a>
        </li>
      </ul>
    </li>
    <li ng-class="{active:$state.includes('ui.table')}">
      <a>
        <span class="pull-right text-muted">
          <i class="fa fa-caret-down"></i>
        </span>
        <i class="icon glyphicon glyphicon-list text-lt"></i>
        <span class="font-normal">Table</span>
      </a>
      <ul class="nav nav-sub bg">
        <li ui-sref-active="active">
          <a ui-sref="ui.table.static">Static table</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.table.smart">Smart table</a>
        </li>
      </ul>
    </li>
    <li ui-sref-active="active">
      <a ui-sref="ui.chart">
        <b class="label bg-primary pull-right">NEW</b>    
        <i class="icon glyphicon glyphicon-stats text-lt"></i>
        <span class="font-normal">Charts</span>
      </a>
    </li>
    <li ng-class="{active:$state.includes('ui.map')}">
      <a>
        <span class="pull-right text-muted">
          <i class="fa fa-caret-down"></i>
        </span>
        <i class="icon glyphicon glyphicon-map-marker text-lt"></i>
        <span class="font-normal">Maps</span>
      </a>
      <ul class="nav nav-sub bg">
        <li ui-sref-active="active">
          <a ui-sref="ui.map.google">Google Map</a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="ui.map.vector">Vector Map</a>
        </li>
      </ul>
    </li>
    <li>
      <a href>
        <span class="pull-right text-muted">
          <i class="fa fa-caret-down"></i>
        </span>
        <i class="icon glyphicon glyphicon-random text-lt"></i>
        <span>Nav levels</span>
      </a>
      <ul class="nav nav-sub bg">
        <li><a href>Nav levels 1</a></li>
        <li>
          <a href>
            <span class="pull-right text-muted">
              <i class="fa fa-caret-down"></i>
            </span>
            <span class="font-normal">Nav levels 2</span>
          </a>
          <ul class="nav nav-sub bg">
            <li>
              <a href>Nav levels 2.1</a>
            </li>
            <li>
              <a href>Nav levels 2.2</a>
            </li>
          </ul>          
        </li>        
      </ul>
    </li>
  </ul>
</nav>